<template>
  <div>
    <van-nav-bar title="发布房源" left-arrow @click-left="navbarBack" />
    <p class="fy">房源信息</p>
    <div class="content">
      <div class="search">
        <span class="Community">小区名称</span>
        <span class="SearchCommunity" @click="toSearch(toSearchInfo)"
          >{{commtiyName || '请输入小区名称'}}
          <van-icon name="arrow" />
        </span>
      </div>
      <van-form label-width="85px">
        <div class="priceCell">
          <van-field
            v-model="form.Price"
            name="用户名"
            label="租金"
            placeholder="请输入租金/月"
          >
          </van-field>
          <span class="Price">¥/月</span>
        </div>
        <div class="priceCell">
          <van-field
            v-model="form.architecture"
            name="用户名"
            label="建筑面积"
            placeholder="请输入建筑面积"
          >
          </van-field>
          <span class="Price">㎡</span>
        </div>
        <!-- 户型 -->
        <div class="priceCell hx">
          <van-field
            readonly
            clickable
            name="picker"
            :value="form.RoomValue"
            label="户型"
            placeholder="请选择 >"
            @click="showPicker = true"
          >
          </van-field>
        </div>
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <!-- 所在楼层 -->
        <div class="priceCell hx">
          <van-field
            readonly
            clickable
            name="picker1"
            :value="form.FooltValue"
            label="所在楼层"
            placeholder="请选择 >"
            @click="showFloor = true"
          >
          </van-field>
        </div>
        <van-popup v-model="showFloor" position="bottom">
          <van-picker
            show-toolbar
            :columns="Floorcolumns"
            @confirm="FloorConfirm"
            @cancel="showFloor = false"
          />
        </van-popup>
        <!-- 朝向 -->
        <div class="priceCell hx">
          <van-field
            readonly
            clickable
            name="picker2"
            :value="form.OrientationValue"
            label="朝向"
            placeholder="请选择 >"
            @click="showOrientation = true"
          >
          </van-field>
        </div>
        <van-popup v-model="showOrientation" position="bottom">
          <van-picker
            show-toolbar
            :columns="Orientationcolumns"
            @confirm="OrientationConfirm"
            @cancel="showOrientation = false"
          />
        </van-popup>
        <!-- 房屋标题 -->
        <div>
          <p class="houseTitle">房屋标题</p>
          <van-field
            v-model="form.houseTitle"
            placeholder="请输入标题(例如：整租 小区名 2室 5000)"
            input-align="left"
          />
        </div>
        <!-- 房屋图像 -->
        <div>
          <p class="houseTitle" style="margin-bottom: 10px">房屋图像</p>
          <van-field name="uploader">
            <template #input>
              <van-uploader v-model="uploader" :after-read='afterRead' />
            </template>
          </van-field>
        </div>
      </van-form>
    </div>
    <div style="padding-left: 15px">
      <p class="houseTitle" style="margin-top: 10px; padding-left: 15px">
        房屋配置
      </p>
    </div>
    <div class="iconClass">
      <van-grid :column-num="5">
        <van-grid-item icon="photo-o" text="衣柜"
        @click="gridClass(item,index)" v-for="(item,index) in iconText"
        :key="index"
        :class="{'iconclassColor':styleList[index]}">
          <i class="iconfont" v-html="iconList[index]"></i>
          <span class="text">{{ item}}</span>
        </van-grid-item>
      </van-grid>
    </div>

    <div style="padding: 0 10px 0 10px">
      <p class="houseTitle" style="margin-bottom: 10px; padding-left: 15px">
        房屋描述
      </p>
      <van-field
        v-model="form.message"
        rows="5"
        autosize
        type="textarea"
        placeholder="请输入房屋描述"
        show-word-limit
        class="ly"
      />
    </div>
    <div style="width: 100%; height: 70px; background-color: #f6f5f6"></div>
    <div class="btn">
      <van-button type="default" style="width: 195px; color: #57b67f"
        >取消</van-button
      >
      <van-button
        type="primary"
        style="width: 180px; float: right; background-color: #58b67f"
        @click="subMit"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>

import { getHouse, getCommuntiy, delCommuntiy } from '@/utils/stroage'
import { cityIcontInfo, getImage, getCityCommtiy, postHouses } from '@/api/home'
export default {
  async created () {
    const city = await getCityCommtiy()
    this.iconValue = city.data.body.supporting.map(item => item.value)
    // m默认北京
    const BJCity = {
      label: '北京',
      pinyin: 'beijing',
      short: '热',
      value: 'AREA|88cff55c-aaa4-e2e0'
    }

    const cityToken = JSON.parse(getHouse()) || BJCity
    this.toSearchInfo = cityToken.value
    console.log(cityToken.value)
    // console.log(cityToken.communityName)
    const res = await cityIcontInfo(cityToken.value)
    const Obj = res.data.body
    console.log(Obj)
    this.obj = Obj
    console.log(this.obj)
    // 取存储的小区名称
    const cityName = JSON.parse(getCommuntiy())
    console.log(this.commtiyName)
    if (cityName) {
      this.commtiyName = cityName.communityName
    }
    // 楼层
    for (let i = 0; i < Obj.floor.length; i++) {
      this.Floorcolumns.push(Obj.floor[i].label)
    }
    // 户型
    for (let i = 0; i < Obj.roomType.length; i++) {
      this.columns.push(Obj.roomType[i].label)
    }
    // console.log(this.Floorcolumns)
    // 朝向
    for (let i = 0; i < Obj.oriented.length; i++) {
      this.Orientationcolumns.push(Obj.oriented[i].label)
    }
    // 设备
    for (let i = 0; i < city.data.body.supporting.length; i++) {
      this.iconText.push(city.data.body.supporting[i].label)
    }
    console.log(this.iconText)
    // 接口 community
    const Community = JSON.parse(getCommuntiy()).community
    console.log(Community)
    this.data.community = Community
  },
  data () {
    return {
      cityObj: {},
      id: '',
      commtiyName: '',
      toSearchInfo: {},
      obj: {},
      imgList: [],
      uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
      form: {
        Price: '',
        architecture: '', // 建筑面积
        Community: '',
        RoomValue: '',
        FooltValue: '',
        OrientationValue: '',
        houseTitle: '',
        message: '',
        ImageUrl: []
      },
      data: {
        title: null,
        description: null,
        houseImg: null,
        oriented: null,
        supporting: null,
        price: null,
        roomType: null,
        size: null,
        floor: null,
        community: null
      },
      class: 0,
      // 户型,
      columns: [],
      showPicker: false,
      // 楼层
      Floorcolumns: [],
      showFloor: false,
      // 朝向
      Orientationcolumns: [],
      showOrientation: false,
      // iconText: ['衣柜', '洗衣机', '空调', '天然气', '冰箱', '暖气', '电视', '热水器', '宽带', '沙发']
      iconText: [],
      iconValue: [], // 冰箱值
      iconList: ['&#xe60c;', '&#xe90d;', '&#xe65b;', '&#xe613;', '&#xe90b;', '&#xe60f;', '&#xe90a;', '&#xe606;', '&#xe783;', '&#xe61c;'],
      styleList: [false, false, false, false, false, false, false, false, false, false]
    }
  },
  methods: {
    navbarBack () {
      this.commtiyName = ''
      this.$router.back()
      delCommuntiy()
    },
    // 户型
    onConfirm (value) {
      this.form.RoomValue = value
      this.showPicker = false
      const res = this.obj.roomType.filter(item => item.label === value)
      this.data.roomType = res[0].value
    },
    FloorConfirm (value) {
      this.form.FooltValue = value
      this.showFloor = false
      // console.log(value)
      const res = this.obj.floor.filter(item => item.label === value)
      // console.log(res, '楼层')
      this.data.floor = res[0].value
    },
    OrientationConfirm (value) {
      this.form.OrientationValue = value
      this.showOrientation = false
      // console.log(value)
      const res = this.obj.oriented.filter(item => item.label === value)
      // console.log(res, '朝向')
      this.data.oriented = res[0].value
      // console.log(this.data)
    },
    // 文件上传
    async afterRead ({ file }) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
      // console.log(e.content)
      const FormDate = new FormData()
      FormDate.set('file', file)
      const res = await getImage(FormDate)
      console.log(res.data.body)
      this.imgList = [...this.imgList, ...res.data.body]
      this.form.ImageUrl = this.imgList.join('|')
      // console.log(this.form.ImageUrl)
    },
    gridClass (item, index) {
      console.log(index)
      // this.class = 1
      this.$set(this.styleList, index, !this.styleList[index])
      const supList = []
      this.styleList.forEach((item, index) => {
        if (item) {
          supList.push(this.iconText[index])
        }
      })
      // supList
      const sup = supList.join('|')
      console.log(sup)
      this.data.supporting = sup
    },
    async subMit () {
      this.data.price = this.form.Price
      this.data.title = this.form.houseTitle
      this.data.description = this.form.message
      this.data.size = this.form.architecture
      this.data.houseImg = this.form.ImageUrl
      const res = await postHouses(this.data)
      console.log(res)
      // this.$toask.success('发布成功')
      this.$toast.success('发布成功')
      this.commtiyName = ''
      delCommuntiy()
      this.$router.push('/home')
    },
    toSearch (obj) {
      // console.log(obj)
      // toSearchInfo
      this.$router.push({ path: '/rent/search/', query: { id: this.toSearchInfo } })
      // delCommuntiy()
    }
  }
}
</script>

<style lang="less" scoped>

/deep/ .van-nav-bar .van-icon {
    color: #fff;
}
/deep/.van-nav-bar__content {
  background-color: #58b67e;
  .van-nav-bar__title {
    color: #fff;
    font-weight: normal !important;
    font-size: 18px;
  }
  .van-nav-bar .van-icon {
    color: #fff;
  }
}
.fy {
  margin: 0;
  padding: 0 15px;
  height: 41px;
  line-height: 41px;
  font-size: 15px;
  color: #58b67e;
  border: 1px solid #f0f0f0;
}
.content {
  padding: 0 0 0 15px;
}
.search {
  height: 44px;
  line-height: 44px;
  width: 100%;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #f0f0f0;

  // float: left;
  .Community {
    height: 44px;
    width: 197px;
    // background-color: #58b67e;
  }
  .SearchCommunity {
    height: 44px;
    flex: 1;
    float: right;
    // width: 163px;
    padding-right: 15px;
    .van-icon {
      margin-left: 8px;
      font-size: 15px;
      color: #c8c8cb;
    }
  }
}
// 表单
.van-form {
  .van-cell {
    border-bottom: none;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f0f0f0;
  }
  .priceCell {
    position: relative;
    .Price {
      position: absolute;
      top: 11px;
      right: 15px;
      font-size: 14px;
      color: #888888;
    }
  }

  /deep/.van-cell::after {
    position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 16px;
    bottom: 0;
    left: 16px;
    /* border-bottom: 1px solid #ebedf0; */
    border-bottom: none;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  .hx .van-field__control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-left: 100;
    padding: 0;
    color: #323233;
    line-height: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    resize: none;
  }
}
.hx {
  /deep/.van-field__control {
    text-align: right !important;
    padding-right: 15px;
  }
}
/deep/.van-picker__confirm {
  color: #108ee9 !important;
  font-size: 17px;
}
/deep/ .van-picker__cancel {
  color: #108ee9 !important;
  font-size: 17px;
}
.houseTitle {
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
  height: 40px;
  font-size: 14px;
  margin-bottom: 0;
  line-height: 40px;
}
// icon
.tags {
  width: 75px;
  height: 51px;
  margin: 10px 0;
  // box-sizing: content-box;
  text-align: center;
  fl
  // background-color: #58b67e;
  p {
    margin: 0;
    box-sizing: border-box;
  }
  .van-icon {
    font-size: 23px;
    // margin-bottom: 10px;
  }
}
.iconClass {
  padding: 0;
  height: 182px;
  background: #f6f5f6;
    .text {
    font-size: 14px !important;
  }
}
/deep/ [class*='van-hairline']::after {

    border: none;
}
/deep/.ly {

    padding: 0 10px;
    height: 147px;
    padding-bottom: 70px;
    // background-color: #58b67e;

}
.btn {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
}
.iconclassColor {
color: #58b67e;
}
</style>
